<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" pageEncoding="UTF-8" %>
<script>
    function updateShow(id) {
        $.ajax({
            type: 'post',
            traditional: true,
            url: "${pageContext.request.contextPath}/user/findById",
            data: {"id": id},
            success: function (result) {
                $('#id').val(id);
                $('#uname').val(result.user.username);
                $('#password').val(result.user.password);
                $('#realName').val(result.user.name);
                $('#ag').val(result.user.age);
                $("#sx").find('option:selected').val();
                console.log(result.user.roles);
                $.each(result.user.roles, function (i, role) {
                    $('#role').append("<option value='" + role.id + "'>" + role.roleName + "</option>");
                });
                $.each(result.user.roles, function (i, r) {
                    $.each(r.privileges, function (i, p) {
                        $('#au').append("<option value='" + p.id + "'>" + p.privilegeName + "</option>");
                    })
                });
                $('#modal_footer').empty().append(' <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>\n' +
                    '<button type="button" onclick="update()" class="btn btn-primary">提交</button>')
                $('#userModal').modal('show');
                window.location.href = `javascript:$('#content').load('./user/userInfo.jsp')`;
            }
        })

    }

    //加载用户信息
    function loadUser() {
        $.ajax({
            url: '${pageContext.request.contextPath}/user/findById?id=${sessionScope.user.id}',
            datatype: 'json',
            type: 'post',
            success: function (data) {
                $('#username').val(data.user.username);
                $('#Name').val(data.user.name);
                $('#Age').val(data.user.age);
                $("#Sex").val(data.user.sex);
                $('#userRole').empty();
                //展示角色
                $.each(data.user.roles, function (i, role) {
                    $('#userRole').append("<option value='" + role.id + "'>" + role.roleName + "</option>");
                });
                //展示权限
                $('#Authority').empty();
                //创建一个数组用于存储所有权限并去重
                let res = new Set();
                $.each(data.user.roles, function (i, r) {
                    $.each(r.privileges, function (j, p) {
                        res.add(p.privilegeName);
                    })
                });
                //展示
                for(let pName of res.values()){//keys()：返回键名的遍历器
                    $('#Authority').append("<option value=''>" + pName + "</option>");
                }
            }
        })
    }

    $(document).ready(function () {
        loadUser();
    });

    function update() {
        $.ajax({
            url: '${pageContext.request.contextPath}/user/updateUser',
            data: {
                sign: 'cover',
                id: $('#id').val(),
                username: $('#uname').val(),
                password: $('#password').val(),
                name: $('#realName').val(),
                age: $('#ag').val(),
                sex: $('#sx').val()
            },
            datatype: 'json',
            type: 'post',
            success: function () {
                $('#userModal').modal('hide');
                //刷新个人信息页面
                loadUser();
                //刷新导航栏上的用户名
                $('#session_user_name').text($('#realName').val());
            }
        })
    }
</script>
<div class="col-sm-10">
    <div class="page-header">
        <h1>个人中心</h1>
    </div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">个人信息</a></li>
    </ul>
    <div id="userPager">
        <div class="form-group">
            <br/>
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="username" class="form-control" id="username" placeholder="用户名">
            </div>
            <br/><br/>
        </div>
        <div class="form-group">
            <label for="Name" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="Name" class="form-control" id="Name" placeholder="姓名">
            </div>
            <br/><br/>
        </div>
        <div class="form-group">
            <label for="Age" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-10">
                <input type="Age" class="form-control" id="Age" placeholder="年龄">
            </div>
            <br/><br/>
        </div>
        <div class="form-group">
            <label for="Sex" class="col-sm-2 control-label">性别</label>
            <div class="col-sm-10">
                <select class="form-control" name="sex" id="Sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <br/><br/>
        </div>
        <div class="form-group">
            <label for="userRole" class="col-sm-2 control-label">所属角色</label>
            <div class="col-sm-10">
                <select multiple class="form-control" id="userRole">

                </select>
            </div>
            <br/><br/><br/><br/><br/><br/>
        </div>

        <div class="form-group">
            <label for="Authority" class="col-sm-2 control-label">你的权限</label>
            <div class="col-sm-10">
                <select multiple class="form-control" id="Authority">

                </select>
            </div>
            <br/><br/><br/><br/>
        </div>

        <div class="form-group">
            <br/><br/>
            <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-default" onclick="updateShow(${sessionScope.user.id})">个人信息修改</button>
            </div>
        </div>
    </div>
</div>
